<template>
  <div style="padding: 10px 0px; background-color: white; min-height: 100vh">
    <van-form @submit="submitForm">
      <searchable-picker
        v-model="form.customerId"
        :columns="customerList"
        valueKey="customerId"
        labelKey="customerName"
        label="客户"
        placeholder="选择客户"
        :rules="[{ required: true, message: '请选择客户' }]"
        @change="getOrderList"
      />
      <searchable-picker
        v-model="form.orderId"
        :columns="orderList"
        valueKey="orderId"
        labelKey="orderName"
        label="商机"
        placeholder="选择商机"
        :rules="[{ required: true, message: '请选择商机' }]"
      />
      <searchable-picker
        v-model="form.projectType"
        :columns="dictList"
        valueKey="value"
        labelKey="label"
        label="项目归属"
        placeholder="选择项目归属"
        :rules="[{ required: true, message: '请选择项目归属' }]"
      />
      <searchable-picker
        v-model="form.devUserId"
        :multiSelect="true"
        :columns="expertList"
        labelKey="expertName"
        valueKey="expertId"
        label="研发人员"
        placeholder="选择研发人员"
      />
      <searchable-picker
        v-model="form.opsUserId"
        :multiSelect="true"
        :columns="expertList"
        labelKey="expertName"
        valueKey="expertId"
        label="实施人员"
        placeholder="选择实施人员"
      />
      <van-field
        v-model="form.devEstimateTaskCount"
        label-width="130px"
        type="number"
        label="预计开发工单（天）"
        placeholder="请输入预计开发工单数量"
        :rules="[{ required: true, message: '请输入立项表开发工单（天）' }]"
      />
      <van-field
        v-model="form.opsEstimateTaskCount"
        type="number"
        label-width="130px"
        label="预计实施工单（天）"
        placeholder="请输入预计实施工单数量"
        :rules="[{ required: true, message: '请输入立项表开发工单（天）' }]"
      />

      <van-field
        v-model="form.remark"
        rows="5"
        autosize
        label="备注"
        type="textarea"
        placeholder="请输入备注"
      />
      <div class="mobile-footer">
        <van-button
          native-type="submit"
          style="width: 49%; border-radius: 10px"
          @click="status = '0'"
          v-if="buttonFlag"
          >暂存</van-button
        >
        <van-button
          type="info"
          native-type="submit"
          style="width: 49%; border-radius: 10px"
          @click="status = '1'"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { getProject, addProject, updateProject, getProjectByStatus } from "@/api/crm/project";
import { getCrmCustomerAllNoPage } from "@/api/crm/customer";
import { getExpertList } from "@/api/crm/expert";
import { getOrderListAll } from "@/api/crm/order";
export default {
  name: "projectAdd",
  props: {
    isRenewal: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      // 表单参数
      form: {},
      buttonFlag: false,
      userList: [],
      customerList: [],
      orderList: [],
      expertList: [],
      projectId: '',
      dictList: [],
      status: ""
    };
  },
  async created() {
    this.getData()
    this.getCrmCustomerAllNoPage();
    this.getExpertList();
    this.projectId = this.$route.params.projectId;
    if(this.projectId !== '-1'){
      this.getProject(this.projectId)
    }
  },
  methods: {
    getData() {
      this.dictList = this.getGroupData();
    },
    reset() {
      this.form = {
        projectId: null,
        orderId: null,
        customerId: null,
        userId: null,
        opsUserId: null,
        devUserId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      };
    },
    async getProject(projectId) {
      this.reset();
      if (projectId) {
        await getProject(projectId).then((response) => {
          this.form = response.data;
          this.buttonFlag = false
        });
      } else {
        await getProjectByStatus({ status: "0" }).then((res) => {
          this.buttonFlag = true
          this.form = res.data
        });
      }
     
      if (this.form.opsUserId) {
        this.form.opsUserId = this.form.opsUserId[0].split(",");
      }
      if (this.form.devUserId) {
        this.form.devUserId = this.form.devUserId[0].split(",");
      }
    },
    getExpertList() {
      getExpertList().then((res) => {
        this.expertList = res.data;
      });
    },
    getOrderList() {
      getOrderListAll({ customerId: this.form.customerId }).then((res) => {
        this.orderList = res.data;
      });
    },
    getCrmCustomerAllNoPage() {
      getCrmCustomerAllNoPage({}).then((res) => {
        this.customerList = res.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.form.status = this.status;
      let obj = JSON.parse(JSON.stringify(this.form));
      if (this.form.opsUserId) {
        obj.opsUserId = this.form.opsUserId.join(",");
      }
      if (this.form.devUserId) {
        obj.devUserId = this.form.devUserId.join(",");
      }
      if (this.form.projectId !== "-1") {
        updateProject(obj).then((response) => {
          this.$toast.success("修改成功");
          this.$router.replace("/crm/project");
        });
      } else {
        addProject(obj).then((response) => {
          this.$toast.success("添加成功");
          this.$router.replace("/crm/project");
        });
      }
    },
  },
};
</script>

<style scoped>
.submitButton {
  width: 95%;
  height: 50px;
  position: fixed;
  top: 90%;
  left: 10px;
}
</style>